<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #t2{
            position: relative;
        }
        body {
            background-color: #dbdde0;
            font-family: "微软雅黑";
        }
        
        #t3 {
            padding-left: 20px;
        }

        #t1 {
            height: 63px;
            background-color: #333;
        }

        input {
            float: right;
            width: 200px;
            height: 33px;
            margin-top: 12px;
            right: 50px;
            border-right: 5px;
            background-color: rgb(110, 110, 110);
            position: absolute
        }

        #se {
            float: right;
            right: 55px;
            position: relative;
            z-index: 1;
            top: 20px
        }

        #t3 {
            height: 30px;
            margin-top: 30px
        }

        #t3 > div {
            height: 20px;
            width: 65px;
            background: red;
            position: absolute
        }

        #t3 p {
            font-size: 13px;
            color: white;
            margin-left: 3px;
        }

        #t3 a {
            text-decoration: none;
            float: left;
            font-size: 12px;
            position: relative;
            left: 69px;
            top: 1px
        }

        #t3 a:link {
            color: #00a1d6
        }

        #t3 a:visited {
            color: #00a1d6;
            overflow: hidden
        }

        #中间区域 {
            padding-left: 20px
        }

        #第一列表区 {
            height: 545px
        }

        #中间左边 {
            display: inline-block;
            padding-top: 2px;
            background-color: #FFF;
            width: 960px;
            height: 2800px;
            margin-top: 12px
        }

        #第一个列表块 {;
            display: inline-block;
            margin: 40px 0 0 0;
            width: 180px;
            height: 484px
        }

        #第二个列表块 {;
            display: inline-block;
            margin: 40px 0 0 0;
            width: 180px;
            height: 368px
        }

        #第三个列表块 {;
            display: inline-block;
            margin: 40px 0 0 0;
            width: 156px;
            height: 660px;
        }

        #第四个列表块 {;
            display: inline-block;
            margin: 40px 0 0 0;
            width: 156px;
            height: 300px;
            border-bottom: 2px solid #5c5d5e;
            padding-left: 20px
        }

        #第五个列表块 {;
            display: inline-block;
            margin: 20px 0 0 0;
            width: 156px;
            height: 200px;
            border-bottom: 2px solid #5c5d5e;
            padding-left: 20px
        }

        #第六个列表块 {;
            display: inline-block;
            margin: 20px 0 0 0;
            width: 156px;
            height: 200px;
            padding-left: 20px
        }

        #第一个列表 {
            width: 156px;
            height: 471px;
            padding-left: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #5c5d5e;
        }

        #第二个列表 {
            width: 176px;
            height: 368px;
            border-bottom: 2px solid #5c5d5e;
        }

        #第一个列表标题 {
            padding-top: 8px;
            height: 50px;
            width: 155px;;
            background-color: #5c5d5e;
            display: inline-block;
            color: #FFF;
            font-size: 12px;
        }

        #第二个列表标题 {
            margin-bottom: 20px;
            margin-left: 20px;
            padding-top: 8px;
            height: 50px;
            width: 155px;;
            background-color: #5c5d5e;
            display: inline-block;
            color: #FFF;
            font-size: 12px;
        }

        #第三个列表标题 {
            margin-bottom: 20px;
            padding-top: 8px;
            height: 50px;
            width: 155px;;
            background-color: #5c5d5e;
            display: inline-block;
            color: #FFF;
            font-size: 12px;
        }

        #第四个列表标题 {
            margin-bottom: 20px;
            padding-top: 8px;
            height: 50px;
            width: 155px;;
            background-color: #5c5d5e;
            display: inline-block;
            color: #FFF;
            font-size: 12px;
        }

        #第五个列表标题 {
            margin-bottom: 20px;
            padding-top: 8px;
            height: 50px;
            width: 155px;;
            background-color: #5c5d5e;
            display: inline-block;
            color: #FFF;
            font-size: 12px;
        }

        #第六个列表标题 {
            margin-bottom: 20px;
            padding-top: 8px;
            height: 50px;
            width: 155px;;
            background-color: red;
            display: inline-block;
            color: #FFF;
            font-size: 12px;
        }

        h2 {
            text-align: right;
            margin-right: 10px
        }

        #第一个列表标题 p {
            margin-right: 10px;
            font-size: 11px;
            color: #aaa;
            text-align: right
        }

        #第二个列表标题 p {
            margin-right: 10px;
            font-size: 14px;
            color: #aaa;
            text-align: right
        }

        #第三个列表标题 p {
            margin-right: 10px;
            font-size: 14px;
            color: #aaa;
            text-align: right
        }

        #第四个列表标题 p {
            margin-right: 10px;
            font-size: 14px;
            color: #aaa;
            text-align: right
        }

        #第五个列表标题 p {
            margin-right: 10px;
            font-size: 14px;
            color: #aaa;
            text-align: right
        }

        #第六个列表标题 p {
            margin-right: 10px;
            font-size: 14px;
            color: #aaa;
            text-align: right
        }

        #第一个列表 .第一个列表内容 {
            height: 58px;
            width: 135px;
            display: inline-block;
            border-bottom: 1px solid #dee0e3;
            border-right: 1px solid #dee0e3;
            list-style: none;
            padding: 15px 20px 10px 0;
        }

        #第二个列表 .第一个列表内容 {
            margin-top: 8px;
            margin-left: 16px;
            background-color: #eeeeee;
            height: 38px;
            width: 160px;
            display: inline-block;
            list-style: none;
        }

        .第一行 {
            font-size: 18px;
            text-align: right
        }

        #第二个列表 > .第一个列表内容 > p {
            margin-top: 8px;
            display: inline-block;
            color: #444;
            font-size: 15px;
            margin-left: 70px;
            font-weight: lighter
        }

        #第一个列表 .内容 {
            font-size: 11px;
            text-align: right
        }

        #中间图片块 {
            padding-top: 7px;
            border-bottom: 2px solid #5c5d5e;
            padding-left: 180px;
            top: -60px;
            left: 185px;
            position: relative;
            width: 560px;
            height: 55px;
            display: inline-block
        }

        #中间大图一 {
            position: relative;
            top: -28px;
        }

        #第二列表区 {
            position: relative
        }

        #第二部分图1 {
            position: absolute;
            left: 185px;
            top: 40px
        }

        #第二部分图2 {
            position: absolute;
            right: 35px;
            top: 40px
        }

        #第二部分图上文字1 {
            position: absolute;
            left: 185px;
            top: 249px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第二部分图上文字2 {
            position: absolute;
            right: 35px;
            top: 249px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        li {
            list-style: none
        }

        #中间图片块 img {
            width: 78px;
            height: 44px;
            display: inline-block;
            float: left;
            margin: 0 10px
        }

        #第二列表图片下方链接部分 {
            border-bottom: 2px solid #5c5d5e;
            position: absolute;
            left: 185px;
            top: 290px;;
            width: 740px;
            height: 118px
        }

        #链接部分1 {
            display: inline-block;
            width: 360px;
            height: 104px;
            background-color: #eee
        }

        #链接部分2 {
            display: inline-block;
            width: 360px;
            height: 104px;
            float: right;
            background-color: #eee
        }

        #第二列表图片下方链接部分 p {
            line-height: 26px;
            font-size: 12px;
            color: #5f646a;
            margin-left: 10px
        }

        #链接部分1作者 {
            position: absolute;
            width: 140px;
            height: 104px;
            top: 0;
            left: 230px
        }

        #链接部分2作者 {
            position: absolute;
            width: 140px;
            height: 104px;
            top: 0;
            left: 610px
        }

        #第三个列表块 .列表内容 {
            margin-top: 10px;
            margin-left: 2px;
            display: inline-block;
            width: 72px;
            height: 26px;
            background-color: #e6e6e6
        }

        #第三个列表块 {
            overflow: hidden;
            padding-left: 20px;
            border-bottom: 2px solid #5c5d5e;
            display: inline-block
        }

        #第三个列表块 .内容 {
            color: #444;
            font-size: 12px;
            text-align: right;
            line-height: 26px;
            margin-right: 5px;
            font-weight: lighter
        }

        #第三列表中间图片区域 {
            overflow: hidden;
            width: 740px;
            height: 660px;
            display: inline-block;
            margin-left: 5px;
            position: relative;
            top: 0px;
            border-bottom: 2px solid #5c5d5e
        }

        #l_3_2 {
            float: right
        }

        #l_3_1 {
            float: left
        }

        #l_3_3 {
            float: left;
            margin-top: 20px;
        }

        #l_3_4 {
            float: left;
            margin-top: 20px;
            left: 0px;
            top: 425px;
            position: absolute
        }

        #l_3_5 {
            float: right;
            margin-top: 20px
        }

        #第三部分图上文字1 {
            position: absolute;
            left: 0px;
            top: 172px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第三部分图上文字2 {
            position: absolute;
            right: 0px;
            top: 172px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第三部分图上文字3 {
            position: absolute;
            left: 0px;
            top: 395px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第三部分图上文字4 {
            position: absolute;
            left: 0px;
            top: 617px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第三部分图上文字5 {
            position: absolute;
            right: 0px;
            top: 618px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第四列表区 {;
            width: 960px;
            overflow: hidden;
            position: relative
        }

        #第四个列表块 .列表内容 {
            margin-top: 10px;
            margin-left: 2px;
            display: inline-block;
            width: 152px;
            height: 42px;
            background-color: #e6e6e6
        }

        #第五个列表块 .列表内容 {
            margin-top: 10px;
            margin-left: 2px;
            display: inline-block;
            width: 152px;
            height: 22px;
            background-color: #e6e6e6
        }

        #第四个列表块 .内容 {
            color: #444;
            font-size: 14px;
            text-align: center;
            line-height: 16px;
            margin-top: 4px;
            font-weight: lighter
        }

        #第五个列表块 .内容 {
            color: #444;
            font-size: 14px;
            text-align: center;
            line-height: 22px;
            font-weight: lighter
        }

        #第四列表中间图片区域 {
            left: 185px;
            position: absolute;
            top: 20px;;
            overflow: hidden;
            width: 740px;
            height: 320px;
            display: inline-block;
            border-bottom: 2px solid #5c5d5e;
        }

        #第四列表中间图片 {
            margin-top: 20px;
            width: 740px;
            height: 285px
        }

        #第四部分图上文字 {
            position: absolute;
            left: 0px;
            top: 274px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 740px;
            height: 31px;
            z-index: 2
        }

        #第五列表区 {
            width: 960px;
            position: relative;
            overflow: hidden;
            margin-top: 20px;
            height: 350px
        }

        #第五列表中间图片区域 {
            top: 20px;
            width: 740px;
            position: absolute;
            overflow: hidden;
            display: inline-block;
            height: 320px;
            margin-left: 9px;
            border-bottom: 2px solid #5c5d5e
        }

        .n {
            position: absolute;
            width: 114px;
            height: 97px
        }

        #n1 {
            top: 208px;
            left: 0px
        }

        #n2 {
            top: 208px;
            left: 123px
        }

        #n3 {
            top: 208px;
            left: 246px
        }

        #n4 {
            top: 0px;
            right: 0px
        }

        #n5 {
            top: 0px;
            right: 123px
        }

        #n6 {
            top: 0px;
            right: 246px
        }

        #n7 {
            top: 106px;
            right: 0px
        }

        #n8 {
            top: 106px;
            right: 123px
        }

        #n9 {
            top: 106px;
            right: 246px
        }

        #n10 {
            top: 208px;
            right: 0px
        }

        #n11 {
            top: 208px;
            right: 123px
        }

        #n12 {
            top: 208px;
            right: 246px
        }

        #小红 {
            display: inline-block;
            position: absolute;
            background-color: red;
            width: 44px;
            height: 22px;
            z-index: 2;
            top: 0px;
            left: 0px
        }

        #小红 > p {
            color: #eeeeee;
            text-align: center
        }

        #第五部分图上文字 {
            position: absolute;
            left: 0px;
            top: 172px;
            color: #eeeeee;
            font-family: "宋体";
            font-size: 12px;;
            text-align: center;
            line-height: 30px;
            background-color: rgba(0, 0, 0, 0.5);
            display: inline-block;
            width: 360px;
            height: 31px;
            z-index: 2
        }

        #第六列表区 {
            position: relative;
            margin-top: 20px
        }

        #第六列表中间图片区域 {
            display: inline-block;
            width: 740px;
            height: 300px;
            position: absolute;
            top: 20px;
            left: 185px
        }

        .六区块 {
            display: inline-block;
            width: 240px;
            height: 255px;
            border: 1px solid rgba(0, 0, 0, 0.3)
        }

        #六区1 {
            margin-right: 10px
        }

        #六区3 {
            float: right
        }

        #六区2 {
            float: left;
            top: 0px;
            left: 250px;
            position: absolute
        }

        #小红2 {
            position: absolute;
            top: 15px;
            left: 0px
        }

        #小红3 {
            position: absolute;
            top: 15px;
            right: 0px
        }

        #第六列表中间图片区域 p {
            display: inline-block;
            width: 240px;
            height: 120px;
            font-size: 20px;
            color: #313131;
            text-align: center;
            line-height: 100px;
            font-weight: lighter
        }

        #中间左边 {
            display: inline-block
        }

        #中间区域 {
            position: relative;
            overflow: hidden
        }

        #中间右边 {
            top: 0px;
            right: 50px;
            width: 300px;
            height: 2200px;
            position: absolute;
            float: right
        }

        footer {
            height: 100px;
            background-color: #0d0c08
        }

        #右2 {
            height: 41px;
            background-color: #222222;
            border-bottom: 2px solid #464646
        }

        #右2 > h2 {
            line-height: 41px;
            color: #eeeeee;
            text-align: left;
            margin: 5px;
            font-size: 16px
        }

        #右3 {
            height: 133px;
            background-color: #333333;
            border-bottom: 2px solid #464646;
            padding-top: 30px
        }

        #右3 > img {
            margin-left: 26px
        }

        #右4 {
            height: 56px;
            background-color: #222222
        }

        #右4 > p {
            font-size: 18px;
            line-height: 56px;
            text-align: center;
            color: #eeeeee
        }

        #右5 {
            height: 160px;
            background-color: #333333
        }

        #右5 > img {
            margin: 25px
        }

        #右6 {
            height: 45px;
            background-color: #222222;
            padding-top: 20px;
            border-bottom: 2px solid #464646
        }

        #右6 > p {
            font-size: 12px;
            text-align: center;
            font-weight: lighter;
            color: #eeeeee;
            line-height: 15px
        }

        #右7 {
            height: 41px;
            background-color: #222222;
            border-bottom: 2px solid #464646;
            padding-left: 5px
        }

        #右7 > h2 {
            line-height: 41px;
            color: #eeeeee;
            text-align: left;
            font-size: 16px
        }

        #右8 {
            height: 90px;
            background-color: #333333;
            border-bottom: 2px solid #464646;
            padding-top: 25px;
            padding-left: 8px
        }

        #右8 > img {
            margin-left: 3px
        }

        #右9 {
            height: 41px;
            background-color: #222222;
            border-bottom: 2px solid #464646;
            padding-left: 5px
        }

        #右9 > h2 {
            line-height: 41px;
            color: #eeeeee;
            text-align: left;
            font-size: 16px
        }

        #右10 {
            height: 90px;
            background-color: #333333;
            border-bottom: 2px solid #464646;
            padding-top: 25px;
            padding-left: 8px
        }

        #右10 > img {
            margin-left: 3px
        }

        #右11 {
            height: 710px;
            position: relative;
            background-color: #333333;
            border-bottom: 2px solid #464646
        }

        #右11 img {
            position: absolute;
            float: left;
        }

        #x1 {
            position: absolute;
            float: left;
            width: 138px;
            height: 65px;
            background-color: #959595;
        }

        #x1 > p {
            line-height: 65px;
            font-size: 16px;
            color: #eeeeee;
            text-align: center
        }

        #x1 {
            top: 20px;
            left: 8px
        }

        #x3 {
            top: 20px;
            left: 154px
        }

        #x4 {
            top: 20px;
            left: 227px
        }

        #x5 {
            top: 95px;
            left: 8px
        }

        #x6 {
            top: 95px;
            left: 81px
        }

        #x7 {
            top: 95px;
            left: 154px
        }

        #x8 {
            top: 95px;
            left: 227px
        }

        #x9 {
            top: 170px;
            left: 8px
        }

        #x10 {
            top: 170px;
            left: 81px
        }

        #x11 {
            top: 170px;
            left: 154px
        }

        #x12 {
            top: 170px;
            left: 227px
        }

        #x13 {
            top: 245px;
            left: 8px
        }

        #x14 {
            top: 245px;
            left: 81px
        }

        #x15 {
            top: 245px;
            left: 154px
        }

        #x16 {
            top: 245px;
            left: 227px
        }

        #x17 {
            top: 320px;
            left: 8px
        }

        #x18 {
            top: 320px;
            left: 81px
        }

        #x19 {
            top: 320px;
            left: 154px
        }

        #x20 {
            top: 320px;
            left: 227px
        }

        #x21 {
            top: 395px;
            left: 8px
        }

        #x22 {
            top: 395px;
            left: 81px
        }

        #x23 {
            top: 395px;
            left: 154px
        }

        #x24 {
            top: 395px;
            left: 227px
        }

        #x25 {
            top: 470px;
            left: 8px
        }

        #x26 {
            top: 470px;
            left: 81px
        }

        #x27 {
            top: 470px;
            left: 154px
        }

        #x28 {
            top: 470px;
            left: 227px
        }

        #x29 {
            top: 545px;
            left: 8px
        }

        #x30 {
            top: 545px;
            left: 81px
        }

        #x31 {
            top: 545px;
            left: 154px
        }

        #x32 {
            top: 545px;
            left: 227px
        }

        #x33 {
            top: 620px;
            left: 8px
        }

        #x34 {
            top: 620px;
            left: 81px
        }

        #x35 {
            top: 620px;
            left: 154px
        }

        #右12 {
            height: 41px;
            background-color: #222222;
            border-bottom: 2px solid #464646;
            padding-left: 5px
        }

        #右12 > h2 {
            line-height: 41px;
            color: #eeeeee;
            text-align: left;
            font-size: 16px
        }

        #右13 {
            height: 690px;
            background-color: #333333;
            padding-left: 10px;
            padding-right: 10px
        }

        #右13 li {
            border-top: 1px solid #464646;
            border-bottom: 1px solid #242424;
            display: inline-block;
            width: 265px;
            height: 60px;
            font-size: 16px;
            color: #eeeeee;
            line-height: 60px;
            font-weight: lighter;
            padding-left: 15px
        }

        #li1 {
            border-top: none !important
        }

        #右13 span {
            background-color: #0d0c08;
            text-align: center;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #eeeeee;
            border-right: 1px solid #464646;
            margin-right: 25px
        }

        footer {
            position: relative
        }

        #作者 {
            width: 333px;
        }

        footer img {
            width: 60px;
            height: 60px;
            display: inline-block;
            margin-top: 10px;
            margin-left: 80px
        }

        footer h3 {
            display: inline-block;
            color: #eeeeee;
            float: left;
            position: absolute;
            top: 10px;
            left: 150px;
            padding: 0
        }

        footer p {
            display: inline-block;
            color: #eeeeee;
            position: absolute;
            top: 50px;
            left: 150px
        }

        footer h5 {
            display: inline-block;
            color: #eeeeee;
            float: left;
            position: absolute;
            top: 75px;
            left: 80px;
        }
        a{
            text-decoration: none;
        }
        a:link{color: #FFFFFF}
        a:visited{color: #FFFFFF}
        .el-menu{
            position: relative;
        }
        #login{
            width: 100px;
            position: absolute;
            float: right;
            display: inline-block;
            right: 100px;
        }

    </style>
</head>
<body>
<header>
    <div id="t1">
        <img src="http://www.dili360.com/public/images/search_btn.png" alt="" id="se">
        <img src="http://www.dili360.com/public/images/logo-top.png" alt="" id="问号">
        <input type="text">
    </div>
    <div id="t2">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#222"
                text-color="#fff"
                active-text-color="#ffd04b"
                font-weight: lighter
                collapse-transition="true"
        >
            <el-menu-item index="1"><a href="" >首页</a></el-menu-item>
            <el-menu-item index="2"><a href="">景观</a></el-menu-item>
            <el-menu-item index="3"><a href="">谈资</a></el-menu-item>
            <el-menu-item index="4"><a href="">作者</a></el-menu-item>
            <el-menu-item index="5"><a href="">大讲堂</a></el-menu-item>

            <template id="login">
                <el-button type="text" @click="open">登录</el-button>
            </template>

        </el-menu>

    </div>
    <div id="t3">
        <div>
            <p>新闻资讯:</p>
        </div>
        <a href="">第六届安巴文化旅游季“中国藏民居保护与发展论坛”在四川道孚县成功举办</a>
    </div>
</header>
<div id="中间区域">
    <div id="中间左边">
        <div id="第一列表区">
            <div id="第一个列表块">
                <ul id="第一个列表">
                    <li id="第一个列表标题"><h2>&nbsp焦点</h2>
                        <p>FOCUS</p></li>
                    <li class="第一个列表内容"><p class="第一行">太湖</p>
                        <p class="内容">江南水网的"心脏"</p></li>
                    <li class="第一个列表内容"><p class="第一行">《江苏》专辑</p>
                        <p class="内容"></p></li>
                    <li class="第一个列表内容"><p class="第一行">平衡石</p>
                        <p class="内容">江南水网的"心脏"</p></li>
                    <li class="第一个列表内容"><p class="第一行">多变的圩田</p>
                        <p class="内容">人与水千年棋盘上<br>新“棋局”</p></li>
                    <li class="第一个列表内容"><p class="第一行">卡达山谷</p>
                        <p class="内容">珠穆朗玛脚下的秘境</p></li>
                </ul>
            </div>
            <img src="http://img0.dili360.com/pic/2021/12/28/61cad7332b0461006262823.jpg@!rw9" alt="" id="中间大图一">
            <div id="中间图片块">
                <ul>
                    <li><img src="http://img0.dili360.com/pic/2021/12/28/61cad7b51049f6270252133.jpg@!rw4" alt=""></li>
                    <li><img src="http://img0.dili360.com/pic/2021/12/28/61cad7332b0461006262823.jpg@!rw4" alt=""></li>
                    <li><img src="http://img0.dili360.com/pic/2021/12/28/61cad7f57290c8719036834.jpg@!rw4" alt=""></li>
                    <li><img src="http://img0.dili360.com/pic/2021/12/28/61cad844be13a9486902271.jpg@!rw4" alt=""></li>
                </ul>
            </div>
        </div>
        <div id="第二列表区">
            <div id="第二个列表块">
                <ul id="第二个列表">
                    <li id="第二个列表标题"><h2>&nbsp社区</h2>
                        <p>BBS</p></li>
                    <li class="第一个列表内容"><p class="内容">社区推荐</p></li>
                    <li class="第一个列表内容"><p class="内容">风土人情</p></li>
                    <li class="第一个列表内容"><p class="内容">城市中国</p></li>
                    <li class="第一个列表内容"><p class="内容">乡村映象</p></li>
                    <li class="第一个列表内容"><p class="内容">风景物语</p></li>
                    <li class="第一个列表内容"><p class="内容">且行且歌</p></li>
                </ul>
            </div>
            <img id="第二部分图1" src="http://img0.dili360.com/pic/2020/06/01/5ed4d2b81c0152t17670211_t.jpg@!rw6" alt="">
            <img id="第二部分图2" src="http://img0.dili360.com/pic/2020/01/06/5e1301713ad114a36626952_t.jpg@!rw6" alt="">
            <p id="第二部分图上文字1">盐城黄海湿地-----落潮留痕沙洲如画</p>
            <p id="第二部分图上文字2">中国第一条民营铁路-----个碧石铁路</p>
            <div id="第二列表图片下方链接部分">
                <div id="链接部分1">
                    <p class="链接内容">行走在邓家围屋，静听岁月的轻语</p>
                    <p class="链接内容">琥珀，带你穿越至远古的宝石</p>
                    <p class="链接内容">山南秘境勒布沟</p>
                    <p class="链接内容">那扇古老的窗</p>
                </div>
                <div id="链接部分1作者">
                    <p class="链接内容">作者：杜建群</p>
                    <p class="链接内容">作者：田庄</p>
                    <p class="链接内容">作者：胡澍</p>
                    <p class="链接内容">作者：赵艳青</p>
                </div>
                
                <div id="链接部分2">
                    <p class="链接内容">重庆：世界上唯一建在平行岭谷的大城市</p>
                    <p class="链接内容">鲁史古镇</p>
                    <p class="链接内容">喀什葛尔，街头魅影</p>
                    <p class="链接内容">遗失的王国，微笑的高棉</p>
                </div>
                <div id="链接部分2作者">
                    <p class="链接内容">作者：彭怀月</p>
                    <p class="链接内容">作者：赵艳青</p>
                    <p class="链接内容">作者：锁强</p>
                    <p class="链接内容">作者：雷蕾</p>
                </div>

            </div>
        </div>
        <div id="第三列表区">
            <div id="第三个列表块">
                <ul id="第三个列表">
                    <li id="第三个列表标题"><h2>&nbsp景观</h2>
                        <p>LANDSCAPE</p></li>
                    <li class="列表内容"><p class="内容">石林</p></li>
                    <li class="列表内容"><p class="内容">丹霞</p></li>
                    <li class="列表内容"><p class="内容">雅丹</p></li>
                    <li class="列表内容"><p class="内容">喀斯特</p></li>
                    <li class="列表内容"><p class="内容">石柱</p></li>
                    <li class="列表内容"><p class="内容">盆地</p></li>
                    <li class="列表内容"><p class="内容">礁石</p></li>
                    <li class="列表内容"><p class="内容">岛屿</p></li>
                    <li class="列表内容"><p class="内容">三角洲</p></li>
                    <li class="列表内容"><p class="内容">冲积扇</p></li>
                    <li class="列表内容"><p class="内容">冰川</p></li>
                    <li class="列表内容"><p class="内容">梯田</p></li>
                    <li class="列表内容"><p class="内容">林地</p></li>
                    <li class="列表内容"><p class="内容">热带雨林</p></li>
                    <li class="列表内容"><p class="内容">草原</p></li>
                    <li class="列表内容"><p class="内容">观星地</p></li>
                    <li class="列表内容"><p class="内容">古典园林</p></li>
                    <li class="列表内容"><p class="内容">石窟</p></li>
                    <li class="列表内容"><p class="内容">古楼</p></li>
                    <li class="列表内容"><p class="内容">古城</p></li>
                    <li class="列表内容"><p class="内容">国道</p></li>
                    <li class="列表内容"><p class="内容">铁路</p></li>
                    <li class="列表内容"><p class="内容">绿洲</p></li>
                    <li class="列表内容"><p class="内容">河流</p></li>
                    <li class="列表内容"><p class="内容">古镇</p></li>
                    <li class="列表内容"><p class="内容">古村</p></li>
                    <li class="列表内容"><p class="内容">自然遗产</p></li>
                    <li class="列表内容"><p class="内容">文化遗产</p></li>
                    <li class="列表内容"><p class="内容">地质公园</p></li>
                    <li class="列表内容"><p class="内容">自然保护区</p></li>
                </ul>
            </div>
            <div id="第三列表中间图片区域">
                <img src="http://img0.dili360.com/pic/2021/12/01/61a72faeb8d579f25855247.jpg" alt="" id="l_3_1">
                <img src="http://img0.dili360.com/pic/2021/12/01/61a742afefc950f88482613.jpg" alt="" id="l_3_2">
                <img src="http://img0.dili360.com/pic/2021/12/01/61a740fb1d8ec5l76204263.jpg" alt="" id="l_3_3">
                <img src="http://img0.dili360.com//ga/M00/49/4A/wKgBy1mJho2AY3FpAABkM5nUt_o063.jpg" alt="" id="l_3_4">
                <img src="http://img0.dili360.com/pic/2021/12/01/61a74506730995d19784990.jpg" alt="" id="l_3_5">
                <p id="第三部分图上文字1">"湿"情画意&nbsp如珠如翠缀国道</p>
                <p id="第三部分图上文字2">盐城滩涂</p>
                <p id="第三部分图上文字3">多面贡嘎</p>
                <p id="第三部分图上文字4">喜马拉雅另一侧的秘境</p>
                <p id="第三部分图上文字5">陕北黄土高原上遍布“地缝”和“天坑”？</p>

            </div>
        </div>
        <div id="第四列表区">
            <div id="第四个列表块">
                <div id="第四个列表">
                    <ul>
                        <li id="第四个列表标题"><h2>推广</h2>
                            <p>POPULARIZE</p></li>
                        <li class="列表内容"><p class="内容">四川100个<br>最美观景拍摄点</p></li>
                        <li class="列表内容"><p class="内容">内蒙古100个<br>最美观景拍摄点</p></li>
                        <li class="列表内容"><p class="内容">西藏100个<br>最美观景拍摄点</p></li>
                        <li class="列表内容"><p class="内容">青海100个<br>最美观景拍摄点</p></li>
                    </ul>

                </div>
            </div>
            <div id="第四列表中间图片区域">
                <img src="http://img0.dili360.com/pic/2021/12/01/61a72dff28dc98822159866.jpg" alt="" id="第四列表中间图片">
                <p id="第四部分图上文字">寻找中国的墙状山</p>

            </div>
        </div>
        <div id="第五列表区">
            <div id="第五个列表块">
                <div id="第五个列表">
                    <ul>
                        <li id="第五个列表标题"><h2>聚焦CNG</h2>
                            <p>OFFICIAL</p></li>
                        <li class="列表内容"><p class="内容">地理大讲堂</p></li>
                        <li class="列表内容"><p class="内容">摄影大赛</p></li>
                        <li class="列表内容"><p class="内容">地理商城</p></li>
                    </ul>
                </div>
            </div>
            <div id="第五列表中间图片区域">
                <img src="http://img0.dili360.com/ga/M00/4A/73/wKgBzFsaToKAKSurAAB9JjspTK0792.jpg" alt="" id="5_1">
                <img src="http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAKcqCAAApNlP1hSw987.jpg" alt="" class="n"
                     id="n1">
                <img src="http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSACQ4JAAA9B08SKcg199.jpg" alt="" class="n"
                     id="n2">
                <img src="http://img0.dili360.com//ga/M02/32/8F/wKgBzFSBbgmAJ1S-AABF8W0t8AU416.jpg" alt="" class="n"
                     id="n3">
                <img src="http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAL3M4AAAYgE-SeHo128.jpg" alt="" class="n"
                     id="n4">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAX9QZAAAjioPcddA830.jpg" alt="" class="n"
                     id="n5">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSARvlZAAApKirFlSg529.jpg" alt="" class="n"
                     id="n6">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAB6PoAAA8g_klmu8323.jpg" alt="" class="n"
                     id="n7">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSADLQBAAAp8uOfeMw913.jpg" alt="" class="n"
                     id="n8">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAeh-vAAA2VEZvY3w133.jpg" alt="" class="n"
                     id="n9">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAfinvAAArWzVFgV0448.jpg" alt="" class="n"
                     id="n10">
                <img src="http://img0.dili360.com/ga/M01/03/C6/wKgBzFRbJlSASohJAAAUEhq3VJc150.jpg" alt="" class="n"
                     id="n11">
                <img src="	http://img0.dili360.com//ga/M01/03/C6/wKgBzFRbJlSAMboqAAAsIZ3suKw693.jpg" alt="" class="n"
                     id="n12">
                <div id="小红"><p>预告</p></div>
                <p id="第五部分图上文字">李国平：遍访极高山</p>


            </div>
        </div>
        <div id="第六列表区">
            <div id="第六个列表块">
                <div id="第六个列表">
                    <ul>
                        <li id="第六个列表标题"><h2>征稿</h2>
                            <p>CONTRIBUTIONS</p></li>
                    </ul>
                </div>
            </div>
            <div id="第六列表中间图片区域">
                <div class="六区块" id="六区1">
                    <img src="http://www.dili360.com/public/images/tougao-left.jpg" alt="" id="小红2">
                    <p>极简</p>
                    <img src="http://img0.dili360.com/ga/M01/49/98/wKgBy1nBz1WAEsgvAACEKbom5lo053.jpg@!rw4" alt=""
                         class="六区块图">
                </div>

                <div class="六区块" id="六区2">
                    <p>美食</p>
                    <img src="http://img0.dili360.com/ga/M01/48/C9/wKgBzFmb_fOAc_EpAAKwvO1aXZY079.jpg@!rw4" alt=""
                         class="六区块图">
                </div>
                <div class="六区块" id="六区3">
                    <img src="http://www.dili360.com/public/images/tougao-right.jpg" alt="" id="小红3">
                    <p>烟&nbsp雾|视角征集</p>
                    <img src="http://img0.dili360.com/ga/M02/48/93/wKgBzFmC77WAZi_sAACGxXqe4fQ103.jpg@!rw4" alt=""
                         class="六区块图">
                </div>
            </div>
        </div>
    </div>
    <div id="中间右边">
        <div id="右1">
            <img src="http://www.dili360.com/public/images/zuimei.png" alt="" style="display: block">
        </div>
        <div id="右2">
            <h2>杂志</h2>
        </div>
        <div id="右3">
            <img src="http://img0.dili360.com//ga/M00/36/DF/wKgBy1UYv9WAN65XAAAUDs6D1iE418.jpg" alt="">
            <img src="http://img0.dili360.com//ga/M01/36/AE/wKgBy1UTaIaAYoC7AAAYQH0v9QE165.jpg" alt="">
            <img src="	http://img0.dili360.com//ga/M02/36/AE/wKgBy1UTaI6AZ47dAAAjAh6pSP8837.jpg" alt="">
        </div>
        <div id="右4">
            <p>中国国家地理微信公共平台</p>
        </div>
        <div id="右5">
            <img src="http://www.dili360.com/public/images/cng-dingyue.png" alt="">
            <img src="http://www.dili360.com/public/images/cng-fuwu.png" alt="">
        </div>
        <div id="右6">
            <p>使用微信扫描二维码进行关注，或微信中<br>
                搜索“中国国家地理”关注。</p>
        </div>
        <div id="右7">
            <h2>活动</h2>
        </div>
        <div id="右8">
            <img src="http://img0.dili360.com/pic/2021/03/03/603f4f37bdd879313146354.jpg" alt="">
            <img src="http://img0.dili360.com/pic/2021/06/16/60c9be8620a797y36079705.jpg" alt="">
            <img src="http://img0.dili360.com/pic/2021/03/03/603f4fd3237e73x81975454.jpg" alt="">
            <img src="	http://img0.dili360.com/pic/2021/03/03/603f4f0523fdb6l61257899.jpg" alt="">
        </div>
        <div id="右9">
            <h2>活动</h2>
        </div>
        <div id="右10">
            <img src="http://img0.dili360.com//ga/M01/41/7B/wKgBzFb-W6CAKIz4AAAbz11ec08893.jpg" alt="">
            <img src="http://img0.dili360.com//ga/M01/03/C3/wKgBy1RbKvWAP5rzAAAW7_IrwTw308.jpg" alt="">
            <img src="http://img0.dili360.com//ga/M01/41/71/wKgBy1b-VbqABduDAABspK3tsd0325.jpg" alt="">
            <img src="http://img0.dili360.com//ga/M01/03/C3/wKgBy1RbKvWAG3I7AAAYE7WeGY8301.jpg" alt="">
        </div>
        <div id="右11">
            <div id="x1"><p>热门作者</p></div>
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x3">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x4">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x5">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x6">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x7">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x8">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x9">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x10">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x11">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x12">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x13">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x14">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x15">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x16">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x17">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x18">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x19">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x20">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x21">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x22">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x23">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x24">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x25">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x26">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x27">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x28">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x29">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x30">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x31">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x32">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x33">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x34">
            <img src="http://img0.dili360.com/ga/M02/03/C4/wKgBy1RkZg2AL-OcAAU38v7QaZs765.jpg@!rw1" alt="" id="x35">
        </div>
        <div id="右12">
            <h2>热度榜</h2>
        </div>
        <div id="右13">
            <ul>
                <li id="li1"><span>1</span>一个人的羌塘</li>
                <li><span>2</span>喀喇昆仑深处的壮美</li>
                <li><span>3</span>西藏为什么如此迷人？</li>
                <li><span>4</span>天路</li>
                <li><span>5</span>那片海</li>
                <li><span>6</span>坝上日出</li>
                <li><span>7</span>贡嘎的辉煌</li>
                <li><span>8</span>只为与你相遇</li>
                <li><span>9</span>彩虹之眼</li>
                <li><span>10</span>萌</li>
            </ul>
        </div>
    </div>
</div>

<footer>
    <div id="作者">

        <img src="illust_78949689_20220126_220926.jpg" height="700" width="700"/></div>
    <h3>达内沈阳三好中心：曹帅</h3>
    <p>同组人员：张旭|张天赋|张家铭 </p>
    <h5>参考网址：http://www.dili360.com/</h5>

</footer>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#t2',
        data: function() {
            return {
                activeIndex2: '1'
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            open() {
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }
    })
</script>

</body>
</html>